<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="icon" href="/static/img/logo.png" type="image/png">
    
    <!-- 字体预加载优化 -->
    <link rel="preconnect" href="https://cdn.jsdelivr.net">
    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
    
    <!-- 样式表 -->
    <link rel="stylesheet" href="/static/css/mobile/common.css">
    <link rel="stylesheet" href="/static/css/mobile/quiz.css">
    <link rel="stylesheet" href="/static/css/markdown.css">
    
    <!-- KaTeX数学公式支持 - 优化加载 -->
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"></noscript>
    
    <!-- KaTeX 字体预加载 -->
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/fonts/KaTeX_Main-Regular.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/fonts/KaTeX_Math-Italic.woff2" as="font" type="font/woff2" crossorigin>
    
    <!-- Markdown解析库 -->
    <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
    <title>答题 - 智慧答题系统</title>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="mobile-header">
        <div class="header-left">
            <button class="back-btn" onclick="window.location.href='/'"><img src="static/img/back.png" alt="ICO" style=" width:26px;height:auto;"></button>
            <span class="header-title">答题挑战</span>
        </div>
        <div class="header-right">
            <div class="timer-display" id="timerDisplay">00:00</div>
        </div>
    </div>

    <div class="page-wrapper">
        <!-- 分类选择区 -->
        <div class="category-selector" id="categorySelector">
            <div class="container">
                <h3 class="selector-title">选择题库分类</h3>
                <div class="category-buttons">
                    <button class="category-btn active" data-category="">全部题目</button>
                    <button class="category-btn" data-category="综合知识">综合知识</button>
                    <button class="category-btn" data-category="科学技术">科学技术</button>
                    <button class="category-btn" data-category="文化艺术">文化艺术</button>
                    <button class="category-btn" data-category="数学">数学</button>
                    <button class="category-btn" data-category="经济管理">经济管理</button>
                    <button class="category-btn" data-category="IT技术">IT技术</button>
                </div>
                <button class="btn btn-primary btn-block" id="startBtn">开始答题</button>
            </div>
        </div>

        <!-- 答题区 -->
        <div class="quiz-area" id="quizArea" style="display: none;">
            <div class="container">
                <!-- 进度条 -->
                <div class="progress-section">
                    <div class="progress-info">
                        <span class="question-number">第 <span id="currentQuestion">1</span> / <span id="totalQuestions">10</span> 题</span>
                        <span class="score-display">得分: <span id="scoreDisplay">0</span></span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="progressFill"></div>
                    </div>
                </div>

                <!-- 题目卡片 -->
                <div class="question-card">
                    <div class="question-title" id="questionTitle">
                        <!-- 题目内容将动态加载 -->
                    </div>
                    
                    <!-- 题目图片 -->
                    <div class="question-image-container" id="questionImageContainer" style="display: none;">
                        <img id="questionImage" class="question-image" alt="题目图片">
                    </div>

                    <!-- 选项列表 -->
                    <div class="options-list" id="optionsList">
                        <!-- 选项将动态加载 -->
                    </div>
                </div>
            </div>
        </div>

        <!-- 结果页 -->
        <div class="result-area" id="resultArea" style="display: none;">
            <div class="container">
                <div class="result-card">
                    <div class="result-icon">🎉</div>
                    <h2 class="result-title">答题完成！</h2>
                    
                    <div class="result-stats">
                        <div class="result-stat">
                            <div class="stat-value" id="resultScore">0</div>
                            <div class="stat-label">总分</div>
                        </div>
                        <div class="result-stat">
                            <div class="stat-value" id="resultCorrect">0</div>
                            <div class="stat-label">答对</div>
                        </div>
                        <div class="result-stat">
                            <div class="stat-value" id="resultWrong">0</div>
                            <div class="stat-label">答错</div>
                        </div>
                    </div>

                    <div class="result-time">
                        用时: <span id="resultTime">00:00</span>
                    </div>

                    <div class="result-buttons">
                        <button class="btn btn-primary btn-block" onclick="window.location.href='/quiz-detail'">
                            查看详情
                        </button>
                        <button class="btn btn-secondary btn-block" onclick="location.reload()">
                            再来一次
                        </button>
                        <button class="btn btn-secondary btn-block" onclick="window.location.href='/'">
                            返回首页
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 固定答题导航按钮 -->
    <div class="quiz-navigation-fixed" id="quizNavigationFixed">
        <button class="btn btn-secondary" id="prevBtn" disabled>
            ‹ 上一题
        </button>
        <button class="btn btn-primary" id="nextBtn" disabled>
            下一题 ›
        </button>
        <button class="btn btn-success" id="submitBtn" style="display: none;">
            提交答卷
        </button>
    </div>

    <!-- 底部导航 -->
    <nav class="mobile-nav">

        <a href="/" class="nav-item active">
            <div class="nav-icon"><img src="static/img/homePage.png" alt="ICO" style=" width:28px;height:auto;"></div>
            <div class="nav-label">首页</div>
        </a>
        <a href="/quiz" class="nav-item">
            <div class="nav-icon"><img src="static/img/test_b.png" alt="ICO" style=" width:30px;height:auto;"></div>
            <div class="nav-label">答题</div>
        </a>
        <a href="/leaderboard" class="nav-item">
            <div class="nav-icon"><img src="static/img/leaderboard.png" alt="ICO" style=" width:26px;height:auto;"></div>
            <div class="nav-label">排行榜</div>
        </a>
        <a href="/profile" class="nav-item">
            <div class="nav-icon"><img src="static/img/me.png" alt="ICO" style=" width:26px;height:auto;"></div>
            <div class="nav-label">我的</div>
        </a>
    </nav>

    <!-- AI助手浮动按钮 -->
    <button class="ai-assistant-btn" id="aiAssistantBtn" title="AI助手" style="position: fixed !important; right: 20px !important; bottom: 160px !important; z-index: 9999 !important; display: flex !important;">
        🤖
    </button>

    <!-- AI助手对话框 -->
    <div class="ai-chat-panel" id="aiChatPanel">
        <div class="ai-chat-header">
            <h3>AI答题助手</h3>
            <select class="ai-service-selector" id="aiServiceSelector" title="选择AI服务">
                <option value="deepseek">DeepSeek</option>
                <option value="kimi">Kimi</option>
            </select>
            <button class="ai-close-btn" id="aiCloseBtn">✕</button>
        </div>
        <div class="ai-chat-messages" id="aiChatMessages">
            <div class="ai-message ai-message-assistant">
                <div class="ai-message-content">
                    你好！我是AI答题助手，有什么问题可以问我哦～ 😊
                </div>
            </div>
        </div>
        <div class="ai-chat-input-area">
            <textarea class="ai-chat-input" id="aiChatInput" placeholder="输入你的问题..." rows="2"></textarea>
            <button class="ai-send-btn" id="aiSendBtn">发送</button>
        </div>
    </div>

    <!-- KaTeX JavaScript - 异步加载 -->
    <script async src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script async src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
    <script async src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/mhchem.min.js"></script>
    
    <script src="/static/js/mobile/quiz.js"></script>
</body>
</html>

